{% extends theme_path('base.html') %}

{% block title %}编辑个人资料{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto px-4 py-8">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
        <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6">编辑个人资料</h2>
        <form method="post" enctype="multipart/form-data">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            
            <div class="space-y-6">
                <!-- 头像上传 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">头像</label>
                    <div class="flex items-center space-x-4">
                        <img src="{{ current_user.avatar }}" alt="avatar" 
                             class="w-16 h-16 rounded-full">
                        <div class="flex-1">
                            <input type="file" name="avatar" 
                                   accept=".jpg,.jpeg,.png,.gif,.webp"
                                   class="block w-full text-sm text-gray-500 dark:text-gray-400
                                          file:mr-4 file:py-2 file:px-4
                                          file:rounded-lg file:border-0
                                          file:text-sm file:font-medium
                                          file:bg-blue-50 file:text-blue-700
                                          dark:file:bg-blue-900/20 dark:file:text-blue-400
                                          hover:file:bg-blue-100 dark:hover:file:bg-blue-900/30">
                        </div>
                    </div>
                </div>

                <!-- 昵称 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        昵称
                    </label>
                    <input type="text" name="nickname" value="{{ current_user.nickname or '' }}"
                           class="w-full px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg
                                  focus:outline-none focus:ring-2 focus:ring-blue-500
                                  bg-white dark:bg-gray-700
                                  text-gray-900 dark:text-white
                                  placeholder-gray-400 dark:placeholder-gray-500"
                           placeholder="输入昵称">
                </div>
                
                <!-- 用户名 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        用户名
                    </label>
                    <input type="text" name="username" value="{{ current_user.username }}"
                           class="w-full px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                                  focus:outline-none focus:ring-2 focus:ring-blue-500 
                                  bg-white dark:bg-gray-700 
                                  text-gray-900 dark:text-white 
                                  placeholder-gray-400 dark:placeholder-gray-500">
                </div>

                
                <!-- 邮箱 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        邮箱
                    </label>
                    <input type="email" name="email" value="{{ current_user.email }}"
                           class="w-full px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                                  focus:outline-none focus:ring-2 focus:ring-blue-500 
                                  bg-white dark:bg-gray-700 
                                  text-gray-900 dark:text-white 
                                  placeholder-gray-400 dark:placeholder-gray-500">
                </div>
                
                <!-- 密码 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        新密码 (不修改请留空)
                    </label>
                    <input type="password" name="password"
                           class="w-full px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                                  focus:outline-none focus:ring-2 focus:ring-blue-500 
                                  bg-white dark:bg-gray-700 
                                  text-gray-900 dark:text-white 
                                  placeholder-gray-400 dark:placeholder-gray-500">
                </div>
                
                <!-- 确认密码 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        确认新密码
                    </label>
                    <input type="password" name="confirm_password"
                           class="w-full px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                                  focus:outline-none focus:ring-2 focus:ring-blue-500 
                                  bg-white dark:bg-gray-700 
                                  text-gray-900 dark:text-white 
                                  placeholder-gray-400 dark:placeholder-gray-500">
                </div>
                
                <!-- 提交按钮 -->
                <div class="flex justify-end space-x-4">
                    <a href="{{ url_for('user.profile') }}"
                       class="px-4 py-2 border border-gray-200 dark:border-gray-600 rounded-lg 
                              text-gray-700 dark:text-gray-300 
                              hover:bg-gray-50 dark:hover:bg-gray-700 
                              transition-colors duration-200">
                        取消
                    </a>
                    <button type="submit"
                            class="px-4 py-2 bg-blue-600 text-white rounded-lg 
                                   hover:bg-blue-700 
                                   transition-colors duration-200">
                        保存修改
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %} 